<template>
  <div>
    <!-- 歌名 -->
    <h1>{{music}}</h1>
    <div class="audio-box">
      <!-- 歌手 -->
    <div class="musicName" >歌手:{{music2}}</div>
    <!-- 几首歌 -->
    <div class="number">{{index}}首歌</div>
    </div>
    <div class="s">
      <!-- 不用管 -->
    <div class="liuxing">流行歌曲</div>
    <div class="sco">
      <!-- 搜索后面的字 -->
      <span class="font">搜索...</span>
      <!-- 搜索框 -->
      <input type="text" @keyup.enter="getDataList" placeholder="请输入歌星或者歌名" v-model="musicName">
      <!-- 搜索按钮 -->
      <button class="iconfont" @click="getDataList">&#xe60c;</button>
    </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 输入的歌曲名称
      musicName: '',
      // 歌曲信息
      musicDataObj: [],
      index: 4
    }
  },
  methods: {
    // 获取vuex中的Mutations方法
    ...mapMutations(['getMusicDataList', 'getUrl']),
    // 获取歌单信息
    async getDataList () {
      // 通过输入的歌名或者歌手获取歌曲信息，
      const { data: res } = await this.$http.get('/search?keywords=' + this.musicName + '&limit=100')
      // 每次点击后初始化this.musicDataObj这个数组
      this.musicDataObj = []
      // 获取到的数据通过map遍历到this.musicDataObj中
      this.musicDataObj = res.result.songs.map(item => {
        return {
          // 歌曲名称
          musicName: item.name,
          // 歌星
          musicSinger: item.artists[0].name,
          // 歌曲图片
          musicImg: item.artists[0].img1v1Url,
          // 歌曲id
          id: item.id//,
          // 歌曲地址
          // url: []
        }
      })
      // 将this.musicDataObj放进vuex中的musicDataList数组中
      this.getMusicDataList(this.musicDataObj)
      this.index = this.musicDataObj.length
      /* 通过for循环获得所有歌曲地址 foreach会因为服务器的波动使id获取的顺序发生改变如果要在foreach中获取url则是要加个定时器获取这里最好用for
      直接在这里获取url很大的程度影响性能服务器，所以先不用获取url
      for (let i = 0; i < this.musicDataObj.length; i++) {
        根据遍历出来的id获取到url
        const { data: res } = await this.$http.get('/song/url?id=' + this.musicDataObj[i].id)
        将获取到的数据放进this.musicDataObj中
        this.musicDataObj[i].url.push(res.data[0].url)
       } */
      // const { data: ress } = await this.$http.get('/song/url?id=' + this.musicDataObj[0].id)
      // this.getUrl(ress.data[0].url)
    }
  },
  computed: {
    // 获取vuex中的数据
    ...mapState(['music', 'music2'])
  }
}
</script>

<style scoped>
.audio-box {
  margin: 10px 0 10px 0;
  color: #6F747C;
  font-size: 14px;
  line-height: 30px;
}
.liuxing {
  width: 100px;
  height: 30px;
  background-color: #F9ED08;
  border-radius: 30px;
  text-align: center;
  line-height: 30px;
  color: #000;
  font-size: 14px;
}
.sco {
  width: 250px;
  height: 40px;
  background-color: #252C3C;
  margin-left: 100px;
  border-radius: 10px;
  z-index: 99;
  position: relative;
  overflow: hidden;
}
input {
  position: absolute;
  background-color: rgba(0, 0, 0, .5);
  outline: none;
  border: none;
  width: 150px;
  height: 40px;
  font-size: 16px;
  left: 50px;
  background-color: #252C3C;
  color: #77787D;
  font-weight: 1;
}
.s {
  display: flex;
  align-items: center;

}
.font {
  padding-left: 5px;
  font-size: 12px;
  line-height: 40px;
  border-right: 1px solid #77787D;
  color: #77787D;
  padding-right: 10px;
}
.iconfont {
  position: absolute;
  height: 40px;
  width: 40px;
  right: 0px;
  color: #fff;
  background-color: #252C3C;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>
